<script setup>
import {queryCategoryList} from '@/api/category'
import { onMounted, ref} from 'vue';


//引入树组件
const data = ref([])

const defaultProps = {
    children:'children',
    label:'name'
}



const handleNodeClick = ()=>{}

//加载树
const loadCategory=async ()=>{
    let result = await queryCategoryList();
    data.value= result
}

//预加载
onMounted(()=>{
    loadCategory()
})
</script>

<template>
 <el-tree
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :render-content="renderContent"
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span style="color:#999; margin-left:10px;">
          创建人: {{ data.founder }}, 创建时间: {{ data.createTime }}
        </span>
      </span>
    </template>
 </el-tree>

</template>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>